<!--
 * @Author: your name
 * @Date: 2020-09-24 10:26:50
 * @LastEditTime: 2020-09-24 12:11:54
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \antd-vue-pro\tests\Untitled-1.html
-->
<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .dragdom {
      background: #cccccc;
      width: 100px;
      height: 600px;
      /* margin: 0 auto; */
      position: relative;
    }

    .dragdom .drag {
      border: 3px transparent solid;
      width: 0px;
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      cursor: e-resize;
      z-index: 1;
    }

    .dragBot {
      border: 3px transparent solid;
      width: 100%;
      height: 0px;
      position: absolute;
      left: 0;
      bottom: 0;
      cursor: n-resize;
      z-index: 1;
    }

    .dragBR {
      border: 5px transparent solid;
      width: 0;
      height: 0px;
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: nw-resize;
      z-index: 3;
    }

    .dragBR:hover {
      border-color: aquamarine;
    }
  </style>

</head>

<body>

  <div class="dragdom">
    <div class="drag"></div>
    <div class="dragBot"></div>
    <div class="dragBR"></div>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
  <script>
    ;
    (function ($) {
      $.fn.dragDiv = function (options) {
        var def = {
          maxW: 600, // 可伸缩的最大宽度
          minW: 50, // 可伸缩的最小宽度
          maxH: 700, // 可伸缩的最大宽度
          minH: 50, // 可伸缩的最小宽度
          translate: ['X', 'Y']
        }; // 参数默认值
        var opts = $.extend(def, options); // 扩展参数，使用默认值或传参
        //设置最大/最小宽度
        var max_width = opts.maxW,
          min_width = opts.minW,
          max_height = opts.maxH,
          min_height = opts.minH;


        //记录鼠标相对left盒子x轴位置
        var mouse_x = 0;
        var mouse_y = 0;

        var div = $(this).parent('div')[0];

        //鼠标移动事件
        function mouseMove(e) {
          var e = e || window.event;
          if (opts.translate.includes('X')) {
            var left_width = e.clientX - mouse_x; // 可伸缩div的宽度
            left_width = left_width < min_width ? min_width : left_width;
            left_width = left_width > max_width ? max_width : left_width;
            div.style.width = left_width + "px";
          }
          if (opts.translate.includes('Y')) {
            var left_height = e.clientY - mouse_y; // 可伸缩div的宽度
            left_height = left_height < min_height ? min_height : left_height;
            left_height = left_height > max_height ? max_height : left_height;
            div.style.height = left_height + "px";
          }
        }
        //终止事件
        function mouseUp() {
          document.onmousemove = null;
          document.onmouseup = null;
        }
        $(this).mousedown(function (e) {
          var e = e || window.event;
          //阻止默认事件
          e.preventDefault();
          mouse_x = e.clientX - left.offsetWidth; // 可伸缩div距离左侧边界的宽度
          mouse_y = e.clientY - left.offsetHeight;
          document.onmousemove = function () {
            mouseMove()
          };
          document.onmouseup = function () {
            mouseUp()
          };
        })
      }
    })(jQuery)
   
    $(function () {
      $('.drag').dragDiv({translate:['X']});
      $('.dragBot').dragDiv({translate:['Y']});
      $('.dragBR').dragDiv();
    })
  </script>
</body>

</html>